<template>
    <!-- 统计区 -->
    <div class="bg-sta">
    <div class="Statistics ">
      <div style="height:28px"></div>
      <!-- <div class="title">统计周期：</div> -->
      <div class="cntent" ref="slider">
          <div class="itemBox" @click="selectItem(titleData[0])" :class="{ 'selectedBack': selectedIndex == index }" :key="item.id">
            <div class="number" :style="{color:titleData[0].color}">{{ titleData[0].value }}</div>
            <div class="name">{{ titleData[0].name }}</div>
          </div> 
      </div>
      <div @click="stepClick(false)" class="left" v-if="titleData.length>6"><i class="el-icon-arrow-left"></i></div>
      <div @click="stepClick(true)" class="right" v-if="titleData.length>6"><i class="el-icon-arrow-right"></i></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    titleData:{
      type:Array,
      default:[]
    },
    tjzq:{
      type:String,
      default:''
    },
    cardSelect:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      currentIndex:0,
      selectedIndex: 0,
      value1:[new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    }
  },
  watch:{
    cardSelect:{
      handler(newVal, oldVal) {
        console.log(newVal,'999')
        this.selectedIndex =newVal
        console.log(this.selectedIndex,newVal,'999')
        // this.selectItem(newVal)
      },
      deep:true
    },
  },
  mounted(){
    this.updateSliderPosition()
  },
  methods: {
    selectItem(index,item) {
      this.selectedIndex = index;
      this.$emit('dealTableList',item)
    },
    next() {
      if (this.currentIndex < this.titleData.length - 6) {
        this.currentIndex++;
        this.updateSliderPosition();
      }
    },
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.updateSliderPosition();
      }
    },
    updateSliderPosition() {
      let dom = this.$refs.slider
      // margin
      const computedStyle = window.getComputedStyle(this.$refs.slider.querySelector('.itemBox'));
      let marginRight = computedStyle.getPropertyValue('margin-right');
      let marginRightNum=Number(marginRight.slice(0,-2))
      // width
      const slideWidth = this.$refs.slider.querySelector('.itemBox').offsetWidth;
      // 0.2  是误差
    },
    stepClick(type){
      if(type){
        // 向右
        this.next()
      }else{
        // 向左
        this.prev()
      }
    },
  }

}
</script>
<style lang="scss" scoped> 
    .selectedBack{
      background: #DAE8F6 !important;
      border: 1px solid #1890ff;
    }
  .bg-sta{
    // background: #FFF;
    // background: #F2F2F2;
    border-radius: 4px;
    // padding: 16px 0px;
    height: 170px;
    width: 100%;
    position: relative;
    margin-bottom: 24px;
  }
  .Statistics{
    overflow-y: hidden;
    overflow-x: hidden;
    
    .title{
      font-size: 14px;
    }
    .cntent{
      width: 100%;
      height: 130px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      transition: transform 0.3s ease-in-out;
      .itemBox{
        height: 100%;
        min-width:15%;
        // max-width: 20%;
        cursor: pointer;
        padding: 24px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // border: 1px dashed #000;
        // border-spacing: 10px 1px;
        background: #fff;
        border-radius: 4px;
        margin-right:2%;
        flex: 1;
        .number{
          font-size: 32px;
        }
        .name{
          font-size: 14px;
        }
      }
      :last-child{
        margin-right:0px;
      }
    }
    .left{
      position: absolute;
      left: 10px;
      top: 125px;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .right{
      position: absolute;
      right: 10px;
      top: 125px;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }

</style>
<style lang="scss">
.Statistics{
  .el-range-editor--medium .el-range-input{
    background: none !important;
  }
  .el-date-editor .el-range-input{
    width: 36%;
  }
}
</style>